import Vue from 'vue'
import Vuex from 'vuex'
import home from '@/store/modules/home'

Vue.use(Vuex); // vue的插件机制

const SOME_MUTATION = 'SOME_MUTATION';

// Vuex.Store 构造器选项
const store = new Vuex.Store({
	modules: {
		home
	},
	// 存放状态
	state:{
		username: 'foo1',
		age: 18,
		count: 0
	},
	// 可以认为是 store 的计算属性,get方法
	getters: {
		ageUsername: state => {
			return `${state.age}${state.username}`
		},
	},
	/*必须是同步函数
	 * Vuex中store数据改变的唯一方法就是mutation
	 * mutations 里面装着改变数据的方法集合，处理数据逻辑的方法全部放在 mutations 里，使数据和视图分离。
	 * 
	 * Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
	 * 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
	 * */
	mutations: {
		addCount(state, params) {
			state.count += params.amount
		},
		// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
		[SOME_MUTATION] (state, params) {
			// mutate state
			state.count += params.amount
		}
	},
	/* action 可以包含任意异步操作, actions 通过 store.dispatch 方法触发
	 * action 提交的是 mutation，通过 mutation 来改变 state
	 * 
	 * action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，
	 * 因此你可以调用 context.commit 提交一个 mutation，
	 * 或者通过 context.state 和 context.getters 来获取 state 和 getters
	 * */
	actions: {
		addCountAction ({ dispatch, state, getters, commit }, params) {
			commit('addCount', params)
			// setTimeout(() => {
			// 	commit('addCount', params)
			// }, 3000);
			// return new Promise((resolve, reject) => {
			// 	setTimeout(() => {
			// 		commit('addCount', params)
			// 		resolve()
			// 	}, 1000)
			// })
		}
	}
})
export default store
